<template>
  <div id="dynamic">
    <div class="narrow-content">
      <div class="user-header clearfix">
        <div class="profilepic">
          <a><img src="../assets/img/user.jpg"/></a>
        </div>
        <div class="user-info">
          <h3 class="user-name">随心前行的唐子清</h3>
          <div class="user-info-list">
            <span>文章&nbsp
              <nobr>3</nobr>
            </span>
            <span>字数&nbsp<nobr>4.8K</nobr></span>
            <span>喜欢&nbsp
              <nobr>3</nobr>
            </span>
          </div>
        </div>
        <router-link class="btn manage-btn" to="edit">新建文章</router-link>
      </div>
      <nav class="user-nav">
        <router-link to="personal">Ta的文章</router-link>
        <router-link to="dynamic" class="on new-message">最新动态</router-link>
        <router-link to="favorite">喜欢的文章</router-link>
      </nav>

      <section class="user-article-wrapper">
        <ul class="comment-wrapper">
          <li class="comment-list">
            <div class="author">
              <router-link class="author-avatar" to="personal">
                <img src="../assets/img/user.jpg">
              </router-link>
              <div class="author-info">
                <span class="user-topname">布莱恩特</span>
                <span class="whatapp">评论了</span>
                <span class="myarticle-title">Android开发架构思考及经验总结</span>
                <p class="publish-time">2017年5月4日&nbsp

                  <nobr>10:00</nobr>
                </p>
              </div>
              <div class="comment-reply">
                <a href="#" class="reply">回复</a>
              </div>
              <div class="comment-phone-reply">
                <a href="#" class="reply">回复</a>
              </div>
            </div>
            <p class="user-comment-text">
              这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。</p>
          </li>
          <li class="comment-list">
            <div class="author">
              <router-link class="author-avatar" to="personal">
                <img src="../assets/img/user.jpg">
              </router-link>
              <div class="author-info">
                <span class="user-topname">布莱恩特</span>
                <span class="whatapp">喜欢</span>
                <span class="myarticle-title">Android</span>
                <p class="publish-time">2017年5月4日&nbsp

                  <nobr>10:00</nobr>
                </p>
              </div>
            </div>
            <p class="user-comment-text">
              这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。</p>
          </li>
          <li class="comment-list">
            <div class="author">
              <router-link class="author-avatar" to="personal">
                <img src="../assets/img/user.jpg">
              </router-link>
              <div class="author-info">
                <span class="user-topname">布莱恩特</span>
                <span class="whatapp">评论了</span>
                <span class="myarticle-title">Android开发架构思考及经验总结</span>
                <p class="publish-time">2017年5月4日&nbsp

                  <nobr>10:00</nobr>
                </p>
              </div>
              <div class="comment-reply">
                <a href="#" class="reply">回复</a>
              </div>
              <div class="comment-phone-reply">
                <a href="#" class="reply">回复</a>
              </div>
            </div>
            <p class="user-comment-text">这篇文章很不错，感谢作者分享。这篇文章很不错，感谢作者分享。</p>
          </li>
        </ul>


      </section>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'dynamic',
    data(){
      return{

      }
    },
    created(){
      this.$http.get('http://172.17.140.113:8360/api/message').then(response => {
        if (response.body && response.body.errno != 0) {
          let msg = response.body ? response.body.errmsg : '请求异常！！！'
          console.log(msg)
          return
        }
        try {
          response = response.body.data
          console.dir(response)

        }
        catch(e){
          console.log("error")
        }

      }, response => {
        console.log(response)
      });
    },
  }
</script>

<style scoped>
  /*个人中心*/
  .narrow-content {
    margin: 40px auto;
    max-width: 840px;
    position: relative;
  }
  .user-header {
    width: 100%;
    height: auto;
    padding: 0 20px 20px;
  }

  .profilepic {
    width: 150px;
    height: 150px;
    line-height: 100px;
    float: left;
  }

  .profilepic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .user-info {
    float: left;
    margin-left: 20px;
  }

  .user-name {
    margin: 0;
    line-height: 90px;
    font-size: 30px;
    font-weight: 700;
    color: #333;
  }

  .user-info-list {
    line-height: 20px;
  }

  .user-info-list a, .user-info-list span {
    margin-right: 20px;
    font-size: 19px;
    width: 72px;
    height: 36px;
    color: #777;
    font-weight: 500;
  }

  .user-info-list nobr {
    color: #000;
  }

  .manage-btn {
    float: right;
    text-align: center;
    width: 130px;
    height: 40px;
    line-height: 40px;
    padding: 0;
    margin: 55px 0;
    background: #387aff;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
  }

  .user-nav {
    width: 100%;
    height: 80px;
    background: #fff;
    margin: 20px 0;
    border: 1px solid #e5e8ef;
    border-radius: 3px;
  }

  .user-nav a {
    display: inline-block;
    position: relative;
    margin: 0 46px;
    line-height: 76px;
    font-size: 16px;
    color: #404452;
  }
  .user-nav a:hover {
    color: #387aff;
  }
  .user-nav .on {
    color: #387aff;
    border-bottom: 3px solid #387aff;
  }

  .new-message:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #ed1c24;
    position: absolute;
    right: -10px;
    top: 20px;
    border-radius: 50%;
  }
  /*公共部分结束*/

  .publish-time {
    color: #666;
    margin: 0;
    font-size: 14px;
    line-height: 22px;
  }

  .reply {
    color: #387aff;
    cursor: pointer;
  }

  .comment-wrapper {
    border: 1px solid #e5e8ef;
    border-radius: 3px;
  }

  .comment-list {
    width: 100%;
    height: auto;
    padding: 40px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #e5e8ef;
  }

  .comment-list .author-avatar {
    display: inline-block;
    vertical-align: middle;
    margin: 0 17px 0 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
  }

  .comment-list .author-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .comment-list .author-info {
    display: inline-block;
    vertical-align: middle;
  }

  .comment-list .author {
    margin-bottom: 14px;
  }



  .author-info span {
    /*display: inline-block;*/
  }

  .user-topname {
    font-size: 16px;
    color: #387aff;
    width: 80px;
  }

  .whatapp {
    font-size: 16px;
    margin: 0 10px;
    color: #999;
  }

  .myarticle-title {
    font-size: 16px;
    color: #333;
  }

  .comment-reply {
    position: absolute;
    right: 40px;
    top: 42px;
  }

  .comment-reply a {
    display: inline-block;
    line-height: 20px;
    font-size: 16px;
  }

  .user-comment-text {
    font-size: 18px;
    color: #000;
    margin-left: 70px;
    line-height: 30px;
  }

  .comment-phone-reply {
    display: none;
  }

  /*个人中心媒体查询*/

  @media screen and (max-width: 768px) {
    .user-header {
      padding: 0 0 0 20px;
    }
    .user-info {
      margin-left: 14px;
    }
    .user-info-list a, .user-info-list span {
      margin-right: 10px;
      font-size: 14px;
    }

    .profilepic {
      width: 60px;
      height: 60px;
      line-height: 60px;
    }

    .user-name {
      font-size: 22px;
      line-height: 40px;
    }

    .manage-btn {
      display: none;
    }

    .user-nav {
      height: 60px;
    }

    .user-nav a {
      margin: 0 10px;
      line-height: 57px;
    }

    .comment-list {
      padding: 20px 20px 30px 20px;
    }

    .whatapp {
      margin: 0 2px;
    }

    .myarticle-title {
      display: block;
      float: right;
      width: 80px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .user-comment-text {
      margin-left: 0;
    }

    .comment-reply {
      display: none;
    }

    .comment-phone-reply {
      display: block;
      position: absolute;
      right: 20px;
      bottom: 14px;
    }

    .comment-phone-reply a {
      display: inline-block;
      width: 50px;
      line-height: 20px;
      font-size: 16px;
    }

    .edit {
      opacity: 0;
    }
  }
</style>
